<template>
    <div>
        <el-row>
            <el-col :span="24">
                <el-text class="mx-1" type="primary">共有{{ list.length }}项，还剩{{ unDo }}项</el-text>
            </el-col>
        </el-row>
        <el-row>
                    <div class="example-pagination-block">
                         <div class="example-demonstration"></div>
                         <el-pagination layout="prev, pager, next" :total="50" />
                    </div>
        </el-row>            
        <br>
        <el-row>
            <el-col :span="24">
                <el-button @click="show('all')">全部</el-button>
                <el-button @click="show('done')" >已完成</el-button>
                <el-button @click="show('undo')" >待完成</el-button>
                <el-button @click="show('clear')" >清空任务</el-button>
            </el-col>
        </el-row>
    </div>
</template>

<script>
export default {
    props:{list:Array},
    computed:{
        unDo(){
            let count = 0
            this.list.map(v => {
                if(v.state == false){
                    count++
                }
            })
            return count
        }
    },
    methods:{
        show(flag){
            this.$emit('show',flag)
        }
    }
}
</script>